<template>
  <div>
    <div v-loading="dataLoading">
      <c-section title="门店装修信息">
        <c-list :column="3">
          <c-list-item label="门店建设项目号" :value="detailData.constCode" />
          <c-list-item label="门店建设状态" dict-type-code="CONST_STATE" :value="detailData.constState" />
          <c-list-item label="办事处" :value="detailData.officeName" />
          <c-list-item label="门店装修任务号" :value="detailData.decorationTaskCode" />
          <c-list-item label="装修进度" dict-type-code="DECORATION_SCHEDULE" :value="detailData.schedule" />
          <c-list-item label="装修步骤" dict-type-code="SHOP_DECORATION_STEPS" :value="detailData.steps" />
          <c-list-item label="客户编码" :value="detailData.clientCode" />
          <c-list-item label="客户名称" :value="detailData.clientName" />
          <c-list-item label="经销商姓名" :value="detailData.customerName" />
          <c-list-item label="经销商电话" :value="detailData.customerCode" />
          <c-list-item label="门店编码" :value="detailData.shopCode" />
          <c-list-item label="门店名称" :value="detailData.shopName" />
          <c-list-item label="门店地址" :value="detailData.shopAddress" />
        </c-list>
      </c-section>
      <c-section title="洽谈任务信息">
        <c-list :column="3">
          <c-list-item label="洽谈任务号" :value="detailData.negotiationTaskCode" />
          <c-list-item label="洽谈进度" dict-type-code="NEGOTIATION_PROGRESS" :value="detailData.negotiationTaskProgress" />
          <c-list-item label="洽谈状态" dict-type-code="NEGOTIATION_STATE" :value="detailData.negotiationTaskState" />
          <c-list-item label="施工单位编码" :value="detailData.unitCode" />
          <c-list-item label="施工单位名称" :value="detailData.unitName" />
          <c-list-item label="施工单位负责人" :value="detailData.principal" />
          <c-list-item label="施工单位负责电话" :value="detailData.principalPhone" />
        </c-list>
      </c-section>
      <c-section title="洽谈记录">
        <el-table
          :data="negotiationList"
          style="width: 100%"
        >
          <el-table-column show-overflow-tooltip prop="result" label="洽谈结果" min-width="120">
            <template slot-scope="scope">
              <span>{{ formaterData(resultList, scope.row.result) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="appointedTime" label="约看现场时间" width="180" />
          <el-table-column prop="remark" label="备注" width="180" />
          <el-table-column prop="" label="附件信息" width="180">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleQureyFile(scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" />
          <el-table-column prop="createBy" label="创建人" width="180" />
        </el-table>
      </c-section>
      <div class="qup-title-box"><span class="border" /><span>附件信息</span></div>
      <table-box
        ref="refDesignFile"
        :table-config="fileDataConfig"
        :data="fileDataList"
        :table-height="200"
        show-index
      />
      <c-section title="流程记录">
        <el-table
          :data="logList"
          style="width: 100%"
        >
          <el-table-column prop="operateType" label="进度" width="140">
            <template slot-scope="scope">
              <span>{{ formaterData(operateTypeList, (scope.row.operateType||0).toString()) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="context" label="备注" width="180" />
          <el-table-column prop="createTime" label="操作时间" width="180" />
          <el-table-column prop="createBy" label="创建人" width="180" />
        </el-table>
      </c-section>
      <el-dialog width="600px" title="附件" :visible.sync="dialogFileVisible">
        <el-table :data="logFile">
          <el-table-column property="attachmentName" show-overflow-tooltip label="文件名" width="90" />
          <el-table-column property="createTime" show-overflow-tooltip label="上传时间" width="140" />
          <el-table-column property="createBy" width="90" label="上传人" />
          <el-table-column prop="" label="预览">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleDownload(scope.row)">下载</el-button>
              <el-button size="mini" type="text" @click="handlePreview(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <!-- 图片预览 -->
      <el-image-viewer
        v-if="imgDialogVisible"
        :z-index="3000"
        :on-close="handleCloseImg"
        :url-list="previewImg"
      />
    </div>
  </div>
</template>
<script>
import { formaterData } from '@/utils'
import { getShopAttachment } from '@/api/common.js'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { filterURL } from '@/utils'
import { getLog, queryPage, getRecords } from '@/api/negotiation'
import { getDictByPatchType } from '@/api/dataDict'

export default {
  name: 'NegotiationDetail',
  components: { ElImageViewer },
  props: {
    // id: {
    //   type: String,
    //   default: ''
    // }
  },
  data() {
    return {
      id: '',
      dialogFileVisible: false,
      formaterData,
      previewImg: [],
      resultList: [],
      operateTypeList: [], // 操作类型
      progressList: [], // 洽谈进度
      imgDialogVisible: false,
      logFile: [], // 洽谈记录附件
      fileDataList: [], // 附件列表信息
      dataLoading: false,
      detailData: { },
      logList: [], // 流程记录
      negotiationList: [],
      fileDataConfig: {
        hideFuncBar: true,
        tabIndex: 0,
        // 表格字段动态配置
        setting: [
          {
            prop: 'attachmentType',
            label: '附件类型',
            minWidth: '140'
          },
          {
            prop: 'attachmentName',
            label: '附件名称',
            minWidth: '140'
          },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: '140'
          },
          {
            prop: 'createTime',
            label: '上传时间',
            minWidth: '140'
          },
          {
            label: '操作',
            button: [
              {
                name: '预览',
                clickFun: this.handlePreview,
                className: 'table-handelclick-text',
                type: 'text'
              },
              {
                name: '下载',
                clickFun: this.handleDownload,
                className: 'table-handelclick-text',
                type: 'text'
              }
            ]
          }]
      },
      formData: {}
    }
  },
  async created() {
    this.id = this.$route.query.id
    if (this.id) {
      this.dataLoading = true
      queryPage(this.id).then(res => {
        this.dataLoading = false
        if (res.success === 1 && res.data.records.length > 0) {
          this.detailData = res.data.records[0]
          this.getFiles()// 获取文件列表信息
        } else {
          this.detailData = {}
        }
      })
      getLog(this.id).then(res => {
        if (res.success === 1) {
          this.negotiationList = res.data.records
        }
      })
      getRecords(this.id).then(res => {
        if (res.success === 1) {
          this.logList = res.data.records
        }
      })
    }
    const { NEGOTIATION_RECORD_RESULT, NEGOTIATION_PROGRESS, LOG_OPERATE_TYPE } =
    await getDictByPatchType(['NEGOTIATION_RECORD_RESULT', 'NEGOTIATION_PROGRESS', 'LOG_OPERATE_TYPE'])
    this.resultList = NEGOTIATION_RECORD_RESULT
    this.progressList = NEGOTIATION_PROGRESS
    this.operateTypeList = LOG_OPERATE_TYPE
  },
  methods: {
    handleQureyFile(id) {
      getShopAttachment(id).then(res => {
        this.logFile = res.data
        if (this.logFile.length) this.dialogFileVisible = true
        else {
          this.$message.warning('未上传附件')
        }
      })
    },
    handleDownload(file) {
      const a = document.createElement('a')
      const url = `/pdf-file/` + file.attachmentUrl
      const fileName = file.attachmentName
      a.href = url
      a.download = fileName
      a.click()
    },
    handlePreview(file) {
      const fileExtension = file.attachmentUrl.substring(file.attachmentUrl.lastIndexOf('.') + 1).toLowerCase()
      if (fileExtension === 'jpg' || fileExtension === 'jpeg' || fileExtension === 'png' || fileExtension === 'gif' || fileExtension === 'bmp') {
      // 图片预览
        if (file.attachmentUrl.substring(0, 11) === 'http://fbpm') {
          window.open(file.attachmentUrl)
          return
        }
        this.previewImg = []
        this.imgDialogVisible = true
        const keyid = this.fileDataList.findIndex(i => i.id === file.id || i.addFlag === file.addFlag)
        const list = [...this.fileDataList.slice(keyid), ...this.fileDataList.slice(0, keyid)]
        this.previewImg = list.map(v => filterURL(v.attachmentUrl))
      } else if (fileExtension === 'doc' || fileExtension === 'docx' || fileExtension === 'xlsx' || fileExtension === 'pdf' || fileExtension === 'pptx') {
        // window.open(`${process.env.VUE_APP_OFFICE_PREFIX}?src=` + process.env.VUE_APP_Img_prefix + file.attachmentUrl)
        window.open(`${process.env.VUE_APP_OFFICE_PREFIX}?src=` + filterURL(file.attachmentUrl))
      } else {
        this.$message.warning(fileExtension + '该文件类型不支持预览')
      }

      // const fileExtension = file.attachmentUrl.substring(file.attachmentUrl.lastIndexOf('.') + 1).toLowerCase()
      // if (fileExtension === 'pdf') {
      //   // pdf预览
      //   const url = `/pdf-file/` + file.attachmentUrl
      //   const routeData = this.$router.resolve({
      //     path: '/viewFile',
      //     query: {
      //       src: btoa(url)
      //     }
      //   })
      //   window.open(routeData.href, '_blank')
      // } else if (fileExtension === 'jpg' || fileExtension === 'jpeg' || fileExtension === 'png') {
      // // 图片预览
      //   this.imgDialogVisible = true
      //   this.previewImg = filterURL(file.attachmentUrl)
      // } else if (fileExtension === 'doc' || fileExtension === 'docx' || fileExtension === 'xlsx' || fileExtension === 'excel') {
      //   // word,excel预览
      //   window.open('http://oos.quanyou.com.cn/op/view.aspx?src=' + filterURL(file.attachmentUrl))
      // } else {
      //   this.$message.warning('该文件类型不支持预览')
      // }
    },
    handleCloseImg() {
      this.imgDialogVisible = false
    },
    // 获取附件
    getFiles() {
      getShopAttachment(this.id).then(res => {
        this.fileDataList = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
